<template>
  <el-dialog :title="title" :close-on-click-modal="false" class="cu-dialog cu-dialog_center" lock-scroll append-to-body
    width="600px" :modal-append-to-body="false" :visible.sync="visible">
    <el-row :gutter="15" class="">
      <el-form ref="dataForm" :model="dataForm" size="medium" label-width="120px" label-position="right" :rules="rules">
        <el-col :span="24">
          <el-form-item label="待分配客户" prop="customer">
            <el-tag v-bind="tagConfig" v-for="item in dataForm.customerData" :key="item.id">
              {{ item.name }}
            </el-tag>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="招商经理" prop="managerId">
            <el-select v-model="dataForm.managerId" placeholder="请选择" @change="changeManager" filterable>
              <el-option :key="item.id" :label="item.realName" :value="item.id" v-for="item in userList" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">{{ $t('common.cancelButton') }}</el-button>
      <el-button type="primary" @click="confirm" :loading="btnLoading">{{ $t('common.confirmButton') }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { assignCustomer } from '@/api/crm/customer'
export default {
  components: {},
  props: {
    title: {
      type: String,
      default: '批量分配'
    },

    buttonType: {
      type: String,
      default: 'input'
    },
    tagConfig: {
      type: Object,
      default: () => ({
        type: 'info',
        closable: false,
        'disable-transitions': false,
        hit: false,
        color: undefined,
        size: undefined,
        effect: 'dark'
      })
    }
  },
  data () {
    return {
      visible: false,
      dataForm: {
        managerId: null,
        customerData: []
      },
      userList: [],
      btnLoading: false,
      rules: {
        managerId: [
          {
            required: true,
            message: '请选择业务经理',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created () {
    this.getUserList()
  },
  methods: {
    init (data) {
      this.visible = true
      this.dataForm.customerData = data
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
      })
    },
    getUserList () {
      this.$store.dispatch('base/getUserList').then(res => {
        this.userList = res.filter(o => o.enabledMark == 1 && o.positionId.indexOf('445842201948194053') > -1)
      })
    },
    changeManager (val) {
      let obj = {}
      obj = this.userList.find(item => {
        return item.id === val
      })
      this.dataForm.managerName = obj.realName
    },
    confirm () {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          this.btnLoading = true
          let data = this.dataForm.customerData.map(o => {
            o.managerId = this.dataForm.managerId
            o.managerName = this.dataForm.managerName
            o.content = this.dataForm.managerName
            o.receiveTime = +new Date()
            o.status = 1
            return o
          })
          assignCustomer(data)
            .then(res => {
              this.$message({
                message: res.msg,
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.$emit('refresh')
                  this.visible = false
                  this.btnLoading = false
                }
              })
            })
            .catch(() => {
              this.btnLoading = false
            })
        }
      })
    }
  }
}
</script>
